<template>

  <!-- 技术评定 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      style="height:80vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">

      <switch-bar :list="barList" v-model="barModel" @change="queryLeftChart"></switch-bar>

      <h6 class="l_title-s">排查总数统计</h6>
          <li class='left-li common_card-bk'>
            <div class='left-li-top'>
              <p class='left-li-top-title'>
                <img src='../imgs/jg_yhpc.png'>
                {{leftTotal.name}}
              </p>
              <p class='float-right left-li-title-right'>
                <span class='num1 color2'>
                  <number-change :number="leftTotal.num"></number-change>
                </span> 次
              </p>
            </div>
            <ul class="left-li-bottom">
              <li v-for="item in leftTotal.itemList || []" :key="item.name">
                {{item.name}}<br>
                <span class="num2 color2">
                  <number-change :number="item.num"></number-change>
                </span> 次
              </li>

            </ul>
          </li>
      <dv-decoration-10 style="width:100%;height:5px;margin:24px 0"/>
      <h6 class="l_title-s">最近排查次数折线图</h6>
      <div ref="chart_2" class="chart_2"></div>

    </dv-border-box-13>

    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="width: 26%;height: 67vh;overflow:hidden"
      backgroundColor="rgba(23, 36, 63, 0.8)">

      <dv-decoration-1 class="board_page-right-d" style="width:100px;height:40px;" />

      <h6 class="l_title-s">隐患排查数据</h6>
      <div class="rollScreen_container">
        <ul class="rollScreen_list">
          <transition-group name="list" tag="li" mode="out-in" >
            <li class="cell-box" v-for='item in rightTableList' :key='item.id'>
              <el-row>
                <el-col :span='6'>
                  <el-image fit="cover" v-if="(item.picList || [])[0] && (item.picList || [])[0].url" :src='(item.picList || [])[0].url' class="dynamic-img" />
                  <img v-if="!(item.picList || [])[0]" :src='defaultImg' width="90%" />
                </el-col>
                <el-col :span='18' style="vertical-align: middle;">
                  <el-row class="cell-item">
                    <el-col :span="6" class="cell-text">位置：</el-col>
                    <el-col :span="18" class="color1">{{ item.location || "--" }}</el-col>
                  </el-row>
                  <el-row class="cell-item">
                    <el-col :span="6" class="cell-text">灾害类型：</el-col>
                    <el-col :span="18">{{ item.openDoorTypeName || "--" }}</el-col>
                  </el-row>
                  <el-row class="cell-item">
                    <el-col :span="6" class="cell-text">时间：</el-col>
                    <el-col :span="18">{{ item.checkTime || "--" }}</el-col>
                  </el-row>
                </el-col>
              </el-row>
            </li>
          </transition-group>
        </ul>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
import { investigateOrderCount, dailyCount, investigateOrderInfo } from '@/services/model/data-board'
import Format from '@/utils/format'
import NumberChange from '../components/number-change.vue'
import SwitchBar from '../components/switch-bar.vue'
const Echarts = require('echarts')

export default {
  components: { NumberChange, SwitchBar },
  props: ['roadId', 'roadSectionId', 'slopeId'],
  data () {
    return {
      charts: null,
      // 右邊原始数据
      dynamicData: [],
      // 右边列表
      rightTableList: [],
      // 排查总数统计
      leftTotal: {},
      defaultImg: require('../imgs/default.png'),
      barList: [
        {
          name: '最近七天',
          code: 7 * 24 * 60 * 60 * 1000
        },
        {
          name: '近一月',
          code: 30 * 24 * 60 * 60 * 1000
        },
        {
          name: '全部',
          code: -1
        },
      ],
      // 默认近七天
      barModel: 7 * 24 * 60 * 60 * 1000,
    }
  },
  methods: {
    // 隐患排查-最近数据轮播(TOP20)
    async queryRightList (deptTreeId, roadId) {
      clearInterval(this.dynamicInterval)
      this.dynamicData = []
      const { data } = await investigateOrderInfo({ deptTreeId, roadId })
      this.dynamicData = (data || []).map(x => {
        const checkTime = x.checkTime ? Format(new Date(x.checkTime)) : ''
        return { ...x, checkTime }
      })
      this.setIntervalFun()
    },
    setIntervalFun () {
      if (!this.dynamicInterval) {
        this.dynamicInterval = setInterval(() => {
          if (this.dynamicData.length > 0) {
            let newData = this.dynamicData.shift()
            this.rightTableList.unshift(newData)
            if (this.rightTableList.length > 9) {
              this.rightTableList.pop()
            }
          }
        }, 2000)
      }
    },
    // 左边的折线图
    async queryLeftChart () {
      let endTime = null
      let startTime = null
      if (this.barModel !== -1) {
        endTime = Date.parse(new Date())
        startTime = endTime - this.barModel
      }
      const { data } = await dailyCount({ roadId: this.roadId, deptTreeId: this.deptTreeId, slopeId: this.slopeId, endTime, startTime })
      this.updateChart(data || [])
    },
    // 初始化echarts
    initChart () {
      this.charts = Echarts.init(this.$refs.chart_2, null, {
        locale: 'ZH'
      })
    },
    // 渲染数据
    updateChart (data) {
      const option = {
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: data.map(x => x.name),
          axisLabel: {
              rotate:45, // 让坐标值旋转一定的角度
              textStyle: {
                color: '#ffffff',  //更改坐标轴文字颜色
              }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
              textStyle: {
                color: '#ffffff',  //更改坐标轴文字颜色
              }
          },
        },
        series: [{
            data: data.map(x => x.num),
            type: 'line',
            smooth:true,
            itemStyle : {
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#1CD8D2' // 0% 处的颜色
                }, {
                    offset: 1, color: '#ffffff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
          areaStyle: {}
        }]
      }
      this.charts.setOption(option)
    },
    // 路线改变
    refresh (deptTreeId, roadId) {
      this.queryLeftTotal(deptTreeId, roadId)
      this.queryLeftChart(deptTreeId, roadId)
      this.queryRightList(deptTreeId, roadId)
    },
    // 查询左边顶部的统计数据
    async queryLeftTotal (deptTreeId, roadId) {
      const { data } = await investigateOrderCount({ deptTreeId, roadId })
      this.leftTotal = data || {}
    },
  },
  mounted () {
    this.initChart()
    let deptTreeId = this.$route.params.deptTreeId
    let roadId = this.$route.params.roadId
    this.refresh(deptTreeId, roadId)
    window.onresize = () => {
      this.charts.resize()
    }
  }
}
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>

  .list-enter-active, .list-leave-active { transition: all 0.5s; }
  .list-enter, .list-leave-to { opacity: 0; transform: translateY(-100%); }

  .rollScreen_container{
    overflow: auto;
    margin-top: 1rem;
  }
  .cell-box {
    position: relative;
    padding: 1rem;
    margin: 0.4rem 0;
  }
  .color1 {
    color: #3BD5FD;
  }
  .cell-item {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #D5E3E8;
    position: relative;
    .cell-text {
      display: inline-block;
      /* width: 5.3rem; */
      color: #939EA3;
    }
  }
  .dynamic-img {
    height: 5.6rem;
    width: 90%;
  }
  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 50vh;
  }
  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;
    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;
      button {
        width: 100%;
      }
    }
  }
  .chart_2 {
    width: 100%;
    height: 250px;
  }
.left-li {
  position: relative;
  margin: 1rem;
  background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
}

.left .left-li:hover {
  cursor: pointer;
}

.left-li-top::after {
  display: block;
  content: " ";
  clear: both;
}
.left .left-li .left-li-top-title {
  float: left;
  color: #D5E3E8;
  font-size: 1.125rem;
}

.left .left-li .left-li-title-right {
  float: right;
  font-size: 0.75rem;
  color: #939EA3;
}
.left-li-bottom {
  position: relative;
  border-top: 1px solid #3A506A;
  display: flex;
  justify-content: space-around;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  font-size: 0.75rem;
  color: #939EA3;
  margin-top: 2%;
  padding-top: 2%;
  line-height: 4;
}

.left-li-bottom::before, .left-li-bottom::after {
  content: " ";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  background: #3A506A;
  position: absolute;
  top: -0.15rem;
  z-index: 2;
}

.left-li-bottom::before {
 left: 0;
}

.left-li-bottom::after {
 right: 0;
}

.left .left-li .left-li-top-title img {
  width: 1.8rem;
  vertical-align: bottom;
}
</style>
